<style>
    #nav {
        width:100%;
        background:#1e1e1e;
        z-index:10000;
        position:relative;
    }
    #nav .layout{
        width:980px;
        margin:0 auto;
    }
    #nav .nav-list{

    }
    #nav .nav-list li{
        width:115px;
        float:left;
        display:inline;
        height:25px;
        position: relative;
    }
    #nav .nav-list li .item-inner{
        display:block;
        height:21px;
        text-align: center;
        color:#fff;
        font-size:14px;
        padding:1px;
        margin-top:2px;
        cursor:pointer;
        text-decoration: none;
    }
    #nav .nav-list li.hover .item-inner{
        background:#79171a;
    }
    #nav .nav-list li.current .item-inner{
        background:#79171a;
    }
    #nav .nav-list li.current .item-inner{
        cursor:default;
    }
    #nav .nav-list li.current em,#nav .nav-list li.hover .item-inner em{
        border:none;
    }
    #nav .nav-list .item-inner em{
        height:16px;
        margin-top:2px;
        display:block;
        line-height:18px;
        width:100%;
        border-right:2px solid #49280c;
    }
    #nav .nav-list .last em{
        border:none;
    }
    #nav .nav-list .subNav{
        background:#fffaf6;
        border:1px solid #791a1d;
        border-top:none;
        padding:20px 30px;
        position:absolute;
        left:0;
        top:25px;
        width:410px;
        display:none;
    }
    #nav .cat-level2{

    }
    #nav .level2-title{
        font-size:14px;
        color:#871f25;
        line-height:30px;
    }
    #nav .level3-title{
        float:left;
        width:50px;
        display:inline;
        color:#1e1e1e;
        font-size:13px;
    }
    #nav .subNav ul{
        width:360px;
        float:left;
        display:inline;
    }
    #nav .subNav li{
        float:left;
        width:auto;
        padding-right:10px;
        font-size:13px;
        position:relative;
        white-space:nowrap;
    }
    #nav .cat-line{
        height:1px;
        line-height:1px;
        font-size:0px;
        border-bottom:1px #d4d0cd dotted;
        margin:10px 0;
    }
    #nav .subNav a{
        color:#505050;
    }

</style>
<div id="nav">
    <div class="layout">
        <ul class="nav-list">
            <li class="current nav-item">
                <a href="javascript:void(0);" class="item-inner"><em>全部品牌</em></a>
                <div class="subNav">
                    <div class="cat-level2 clearfix">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3 clearfix">
                            <h3 class="level3-title">[全部]</h3>
                            <ul class="clearfix">
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                            </ul>
                        </div>
                    </div>
                    <div class="cat-line"></div>
                    <div class="cat-level2">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3">
                            <h3 class="level3-title">[全部]</h3>
                            <ul>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item"><a href="#"  class="item-inner"><em>品牌1</em></a>
                <div class="subNav">
                    <div class="cat-level2 clearfix">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3 clearfix">
                            <h3 class="level3-title">[全部]</h3>
                            <ul class="clearfix">
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                            </ul>
                        </div>
                    </div>
                    <div class="cat-line"></div>
                    <div class="cat-level2">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3">
                            <h3 class="level3-title">[全部]</h3>
                            <ul>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </li>
            <li class="nav-item"><a href="#" class="item-inner"><em>品牌</em></a>
                <div class="subNav">
                    <div class="cat-level2 clearfix">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3 clearfix">
                            <h3 class="level3-title">[全部]</h3>
                            <ul class="clearfix">
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li><a href="#">啦啦啦</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="cat-line"></div>
                    <div class="cat-level2">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3">
                            <h3 class="level3-title">[全部]</h3>
                            <ul>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li><a href="#">啦啦啦</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li class="last nav-item"><a href="#" class="item-inner"><em>品牌</em></a>
                <div class="subNav">
                    <div class="cat-level2 clearfix">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3 clearfix">
                            <h3 class="level3-title">[全部]</h3>
                            <ul class="clearfix">
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li><a href="#">啦啦啦</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="cat-line"></div>
                    <div class="cat-level2">
                        <h2 class="level2-title">分类</h2>
                        <div class="cat-level3">
                            <h3 class="level3-title">[全部]</h3>
                            <ul>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li>啦啦啦</li>
                                <li>鞋</li>
                                <li>发生点</li>
                                <li>箱包</li>
                                <li>衣服</li>
                                <li><a href="#">啦啦啦</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
    </div>
</div>
<script>
    KISSY.ready(function(){
        var S=KISSY,DOM=S.DOM,Event=S.Event;
        var lastActive=null;
        
        Event.on(".nav-item","mouseleave",function(){
            DOM.css(DOM.get(".subNav",this),"display","none");
            DOM.removeClass(this,"hover")
        })
        Event.on(".subNav","mouseleave",function(){
            DOM.css(this,"display","none")
        })
        Event.on(".nav-item","mouseover",function(){
            DOM.css(DOM.get(".subNav",lastActive),"display","none")
            DOM.removeClass(lastActive,"hover")
            DOM.css(DOM.get(".subNav",this),"display","block");
            DOM.addClass(this,"hover")
            lastActive=this;
        })
    });
</script>